<template>
  <el-dialog
    v-model="visible"
    title="确认删除"
    width="400px"
    :before-close="handleClose"
    class="delete-confirm-dialog"
    append-to-body
    destroy-on-close
    center
  >
    <div class="dialog-content">
      <div class="warning-icon">
        <el-icon :size="48" class="icon">
          <WarningFilled />
        </el-icon>
      </div>
      
      <div class="message-content">
        <h3 class="warning-title">删除智能体</h3>
        <p class="warning-message">
          确定要删除智能体 <strong class="agent-name">"{{ agentName }}"</strong> 吗？
        </p>
        <p class="warning-note">
          此操作不可撤销，删除后将无法恢复。
        </p>
      </div>
    </div>

    <template #footer>
      <div class="dialog-footer">
        <el-button @click="handleClose" class="cancel-btn">
          取消
        </el-button>
        <el-button
          type="danger"
          @click="handleConfirm"
          :loading="loading"
          class="confirm-btn"
        >
          {{ loading ? '删除中...' : '确认删除' }}
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { ref, computed, watch, nextTick } from 'vue'
import { ElMessage } from 'element-plus'
import { WarningFilled } from '@element-plus/icons-vue'
import { animateDialogEnter, animateDialogExit, animateButtonClick } from '@/services/animationService'

// 组件属性
interface Props {
  modelValue: boolean
  agentName?: string
  agentId?: string
}

// 组件事件
interface Emits {
  (e: 'update:modelValue', value: boolean): void
  (e: 'confirm', agentId: string): void
}

const props = withDefaults(defineProps<Props>(), {
  agentName: '未知智能体',
  agentId: ''
})

const emit = defineEmits<Emits>()

// 响应式数据
const loading = ref(false)

// 计算属性
const visible = computed({
  get: () => props.modelValue,
  set: (value: boolean) => emit('update:modelValue', value)
})

// 监听弹窗显示状态
watch(visible, async (newVal) => {
  if (newVal) {
    await nextTick()
    animateDialogEnter('.delete-confirm-dialog .el-dialog')
  }
})

/**
 * 处理弹窗关闭
 */
async function handleClose() {
  // 执行退出动画
  await animateDialogExit('.delete-confirm-dialog .el-dialog')
  
  // 关闭弹窗
  visible.value = false
}

/**
 * 处理确认删除
 */
async function handleConfirm() {
  if (!props.agentId) {
    ElMessage.error('智能体ID不能为空')
    return
  }
  
  try {
    // 按钮点击动画
    animateButtonClick('.confirm-btn')
    
    loading.value = true
    
    // 模拟删除延迟
    await new Promise(resolve => setTimeout(resolve, 800))
    
    // 发送确认事件
    emit('confirm', props.agentId)
    
    // 显示成功消息
    ElMessage.success('智能体删除成功')
    
    // 关闭弹窗
    visible.value = false
    
  } catch (error) {
    console.error('删除智能体失败:', error)
    ElMessage.error('删除失败，请重试')
  } finally {
    loading.value = false
  }
}
</script>

<style scoped>
.delete-confirm-dialog {
  --el-dialog-border-radius: 12px;
}

/* Element Plus 组件样式现在由 global.scss 统一管理 */

.dialog-content {
  padding: 20px;
  text-align: center;
  color: #e0e6ed;
  background-color: #1a1a2e;
}

.warning-icon {
  margin-bottom: 20px;
}

.warning-icon .icon {
  color: #ff6b6b;
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.1);
    opacity: 0.8;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

.message-content {
  text-align: center;
}

.warning-title {
  margin: 0 0 16px 0;
  color: #ff6b6b;
  font-size: 20px;
  font-weight: 600;
}

.warning-message {
  margin: 0 0 12px 0;
  font-size: 16px;
  line-height: 1.5;
  color: #e0e6ed;
}

.agent-name {
  color: #32ec8a;
}

.warning-note {
  margin: 0;
  font-size: 14px;
  color: #b8c5d1;
  font-style: italic;
}

.dialog-footer {
  padding: 16px 20px;
  background-color: #16213e;
  border-top: 1px solid rgba(255, 107, 107, 0.3);
  display: flex;
  justify-content: center;
  gap: 16px;
}

.cancel-btn {
  background-color: transparent !important;
  border: 1px solid rgba(224, 230, 237, 0.3) !important;
  color: #e0e6ed !important;
  padding: 8px 16px;
  border-radius: 4px;
}

.cancel-btn:hover {
  border-color: #32ec8a !important;
  color: #32ec8a !important;
}

.confirm-btn {
  background-color: #ff6b6b !important;
  border: 1px solid #ff6b6b !important;
  color: #ffffff !important;
  font-weight: 600;
  padding: 8px 16px;
  border-radius: 4px;
}

.confirm-btn:hover {
  background-color: #ff5555 !important;
  border-color: #ff5555 !important;
}

.confirm-btn:disabled {
  background-color: rgba(255, 107, 107, 0.3) !important;
  border-color: rgba(255, 107, 107, 0.3) !important;
  color: rgba(255, 255, 255, 0.5) !important;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .dialog-content {
    padding: 16px;
  }
  
  .warning-title {
    font-size: 18px;
  }
  
  .warning-message {
    font-size: 14px;
  }
  
  .dialog-footer {
    flex-direction: column;
    gap: 12px;
  }
  
  .cancel-btn,
  .confirm-btn {
    width: 100%;
  }
}
</style>